<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<!-- vue使用双向数据绑定的结构 
				案列: 1.input文本输入框
					2.textarea 文本域
					3.select 下拉框
					4.radio 单选框
					5.checkbox 复选框
			-->
			```````````````````````````````````````````````````````````````
			<form action="xxxxx">
							<h1>表单数据提交-数据封装</h1>
							姓名: <input  type="text" v-model="user.username"  /><br>
							详情: <textarea v-model="user.info"></textarea><br>
								 <!-- 如果下拉框支持多选 multiple="true"-->
							城市: <select name="city" v-model="user.city" multiple="true">
									<option value="北京">北京</option>
									<option value="上海">上海</option>
									<option value="成都">成都</option>
							      </select><br>
							性别: 
								  <input type="radio" value="男" name="gender"  v-model="user.gender"/>男
								  <input type="radio" value="女" name="gender"  v-model="user.gender"/>女
						</form>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
		<script type="text/javascript">
			const app = new Vue({
				el: '#app',
				data: {
					user: {
											username: '',
											info: '添加用户详情信息',
											//如果数据单值采用字符串, 如果是多值 采用数组
											city: ['北京','上海'],
											gender: '女'
										}

				},
				methods: {

				}
			})
		</script>
	</body>
</html>
